<!doctype html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<title>系统登录</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="/assets/css/icons.min.css" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" href="/assets/element/index.css">
	<link rel="stylesheet" href="/assets/css/base.css">
	<script src="/assets/element/vue.js"></script>
	<script src="/assets/element/index.js"></script>
	<script src="/assets/js/axios.min.js"></script>
	<script src="/assets/js/js.cookie.min.js"></script>
</head>

<body>
	<div id="app" class="body-bg">

		<div class="login">
			<div class="h2 flex" style="align-items: center;justify-items: center;">
				<img src="/static/img/default4.png" />
				<div style="margin-left: 10px;">被服按需领用系统</div>
			</div>
			<div class="login-left">
				<img src="/static/img/background_item.png" />
				<div id="bg_info2"><span class="bginfo2_t">统一认证、统一授权</span><br><span class="bginfo2_b">技术支持：范工
						18561587587</span></div>
			</div>
			<div class="login-main">
				<h2 class="site-title" style="font-size:18px;">请登录后操作</h2>
				<el-form ref="login" :model="login" size="medium" :rules="loginRules" class="login-form" label-position="left">
					<el-form-item style="margin-bottom:18px;" prop="username">
						<el-input v-model="login.username" type="text" placeholder="用户名" prefix-icon="el-icon-user" autocomplete="off" clearable />
					</el-form-item>
					<el-form-item style="margin-bottom:18px;" prop="password">
						<el-input v-model="login.password" type="text" placeholder="密码" prefix-icon="el-icon-lock" @keyup.enter.native="handleLogin" autocomplete="off" clearable show-password />
					</el-form-item>
					<el-form-item style="margin-bottom:18px;" prop="verify" v-if="verify_status">
						<el-col :span="13">
							<el-input v-model="login.verify" type="text" placeholder="验证码" prefix-icon="el-icon-picture" @keyup.enter.native="handleLogin" autocomplete="off" clearable />
						</el-col>
						<el-col :span="11">
							<el-image :src="verifySrc" alt="验证码" title="点击刷新验证码" @click="refeshVerifySrc" style="width:108px;height:35px; margin-top:3px;float:right" />
						</el-col>
					</el-form-item>
					<el-form-item>
						<el-button :loading="loading" size="small" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
							<span v-if="!loading">登 录</span>
							<span v-else>登 录 中...</span>
						</el-button>
					</el-form-item>

				</el-form>

				<div style="text-align:center; margin-top:30px">
					<span>Powered by 青岛七度科技有限公司</span>
				</div>

				<div style="text-align:center;color:red;margin-top:10px;">
					所有操作日志留存，请认真落实保密！
				</div>
			</div>
		</div>

	</div>

	<script>
		base_url = '/admin'
		new Vue({
			el: '#app',
			data: function() {
				return {
					loading: false,
					login: {
						username: '',
						password: '',
						rememberMe: false,
					},
					loginRules: {
						username: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						}],
						password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						}],
						verify: [{
							required: true,
							message: '请输入验证码',
							trigger: 'blur'
						}]
					},
					verifySrc: '',
					verify_status: false,
					success_url: '',
					site_title: '',
				}
			},

			mounted() {
				this.captch()
			},
			methods: {
				captch() {
					if (!this.verify_status) {
						return;
					}
					axios('/login.html').then(res => {
						console.log(res)
						if (res.data.status == 200) {
							this.verifySrc = res.data.data.img
							this.login.key = res.data.data.key
							this.success_url = res.data.success_url
							this.site_title = res.data.site_title
							this.verify_status = res.data.verify_status
						} else {
							this.$message.error('验证码获取失败!')
						}
					})
				},
				refeshVerifySrc() {
					this.captch()
				},
				handleLogin() {
					this.$refs['login'].validate(valid => {
						if (valid) {
							this.loading = true
							axios.post('/login.html', this.login).then(res => {
								if (res.data.status == 200) {
									if (window.screen.width < 500) {
										window.location.href = '/wx/';
									} else {
										window.location.href = '/admin/sys/index.html';
									}
								} else {
									this.loading = false
									this.refeshVerifySrc()
									this.$message.error(res.data.msg)
								}
							})
						}
					})
				}
			},
		})
	</script>


	<style>
		div {
			box-sizing: border-box
		}

		.h2 {
			font-size: 3rem;
			color: #FFF;
			text-align: center;
			margin-top: 30px;
			justify-content: center;
			justify-items: center;
			display: flex;
		}

		.body-bg {
			position: absolute;
			height: 100%;
			width: 100%;
			top: 0;
			left: 0;
			overflow-y: auto;
			background: url(/static/img/login_background.png) top center;
			align-items: center;
			background-size: cover;

		}

		.login {
			position: relative;
			width: 1210px;
			margin: 0 auto;
			padding-top: 70px;
		}

		.login-left {
			text-align: center;
			color: #fff;
			position: absolute;
			top: 260px;
			left: 150px;
		}

		#bg_info2 {
			letter-spacing: 2px;
			width: 100%;
		}

		.bginfo2_t {
			font-size: 30px;
			width: 100%;
		}

		.bginfo2_b {
			width: 100%;
			display: block;
			margin-top: 10px;
			font-size: 18px;
		}

		.login-main {
			position: absolute;
			z-index: 1;
			background-color: #FFF;
			border-radius: 1em;
			border: 1px solid #fff;
			width: 320px;
			padding: 10px 20px 30px 20px;
			left: 680px;
			top: 300px;
		}

		@media screen and (max-width:600px) {
			.login {
				width: unset;
				padding-top: 70px;
			}

			.h2 {
				font-size: 2.2rem;
			}

			.h2.flex {
				display: unset;
			}

			.h2 img {
				display: block;
				margin: auto;
			}

			.login-left {
				left: unset;
			}

			.login-left img {
				width: 100%;
			}

			.login-main {
				width: 90%;
				margin: auto;
				position: unset;
				margin-top: 40px;
			}
		}
	</style>
</body>

</html>